<script setup lang="ts">
import {PropType} from 'vue'
import {MenuView, MenuType} from '@/store/nav'
import {IconConfig} from '@/api/config'
import {routerPush, RouterPushType} from '@/util/router'
import dIcon from '@/components/dIcon.vue'
const props = defineProps({
  menus: {
    type: Array as PropType<Array<MenuView>>,
    required: true
  }
})

const showMenu = (menu: MenuView) => {
  return !menu.hide && menu.menuType && menu.menuType === MenuType.CATALOG
}

const getIconConfig = (icon: string): IconConfig => {
  return {icon, type: 'custom', size: 20, color: '#C1C6D0'}
}

const clickMenu = (menu: MenuView) => {
  routerPush(menu, undefined, RouterPushType.Sider)
}
</script>

<template>
  <template v-for="menu in props.menus" :key="menu.code">
    <el-sub-menu
      v-if="showMenu(menu)"
      :hide-timeout="100"
      :show-timeout="100"
      :index="menu.code"
    >
      <template #title>
        <d-icon
          v-if="menu.icon"
          class="el-menu-item-sidebar"
          :icon-config="getIconConfig(menu.icon)"
        />
        <span>{{ menu.label }}</span>
      </template>
      <menu-tree v-if="menu.children" :menus="menu.children" />
    </el-sub-menu>
    <el-menu-item
      v-else-if="!menu.hide"
      :index="menu.code"
      @click="clickMenu(menu)"
    >
      <d-icon v-if="menu.icon" :icon-config="getIconConfig(menu.icon)" />
      <span>{{ menu.label }}</span>
    </el-menu-item>
  </template>
</template>

<style lang="less" scoped>
.el-sub-menu {
  &.is-active {
    .el-sub-menu__title {
      span {
        color: #6ac4c9;
      }
      .el-menu-item-sidebar {
        color: #6ac4c9 !important;
      }
    }
  }
}
:deep(.el-menu-item) {
  padding-left: 55px !important;
  &.is-active {
    ::before {
      content: '';
      width: 8px;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      background: var(--theme-color);
    }
  }
}
</style>
